<!--
 * 使用page-wrapper组件实现的页面，简单，易用，代码里量少
 * @author luguoxiang
 * @date 2022/9/17
 * 开源项目：https://gitee.com/lgx1992/lg-soar 求star！请给我star！请帮我点个star！
-->
<template>
  <page-wrapper :schema="schema" :api="api" subject="mock">
    <!-- 搜索栏插槽 -->
    <template #search1="{ data, field, componentProps }">
      <t-input v-model="data[field]" placeholder="我是自定义插槽1" />
    </template>
    <template #search2="{ data, field, componentProps }">
      <t-input v-model="data[field]" placeholder="我是自定义插槽2" />
    </template>
    <template #search2-label="{ label }"> label插槽 </template>
    <template #search2-error="{ error }"> error插槽 </template>

    <!--  表格插槽  -->
    <template #table1="{ row, rowIndex, col, colIndex }"> 我是插槽1 </template>
    <template #table2="{ row, rowIndex, col, colIndex }"> 我是插槽2 </template>
    <template #title="{ row, rowIndex, col, colIndex }"> title插槽 </template>

    <!-- 表单插槽 -->
    <template #form1="{ data, field, componentProps }">
      <t-input v-model="data[field]" type="tel" placeholder="我是自定义插槽1" />
    </template>
    <template #form2="{ data, field, componentProps }">
      <t-textarea v-model="data[field]" placeholder="我是自定义插槽2" />
    </template>
    <template #form2-label="{ label }"> label插槽 </template>
    <template #form2-error="{ error }"> error插槽 </template>

    <!-- 详情插槽 -->
    <template #detail1="{ value }"> 我是自定义插槽1 </template>
    <template #detail2="{ value }"> 我是自定义插槽2 </template>
    <template #detail2-label> label插槽 </template>
  </page-wrapper>
</template>

<script setup lang="ts">
import schema from './schema';
import api from './api';
import { PageWrapper } from '@/components';
</script>

<style lang="less" scoped>
:deep(.lg-table-dict) {
  &.dict-value-0 {
    color: var(--app-color-primary);
    border-color: var(--app-color-primary);
  }
  &.dict-value-1 {
    color: var(--td-error-color-7);
    border-color: var(--td-error-color-7);
  }
  &.dict-value-2 {
    color: var(--td-success-color-7);
    border-color: var(--td-success-color-7);
  }
}
</style>
